{% extends 'BASE/base.html' %}
{% block css %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/Users/account.css' %}" />
{% endblock %}
{% block js %}
{% load static %}
<script src="{% static 'js/Users/account.js' %}" type="text/javascript" charset="utf-8"></script>
{% endblock %}
{% block title %} 登陆-书漫网O(∩_∩)O哈哈~ {% endblock %}
{% block top_nav %}{% endblock %}
{% block main %}
<div class="container ">
	<div class="row" id="logo">
        <a href="{% url 'Index:index' %}" class="btn btn-lg" style="color:black">
			<span class="zi zi_tmGithubalt zi_2x"></span>
		</a>
	</div>
	<!-- 登陆与注册 -->
	<div class="row justify-content-center ">
		<div class="col-sm-8 col-md-5 " id="signIn_and_signUp">
			<br>
			<div class="row justify-content-center">
				<div id="tab" class="col-10">
					<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
						<li class="nav-item">
							<a class="nav-link active" id="sign_in-tab" data-toggle="pill" href="#sign_in" role="tab" aria-controls="sign_in"
							 aria-selected="true">登录</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="sign_up-tab" data-toggle="pill" href="#sign_up" role="tab" aria-controls="sign_up"
							 aria-selected="false">注册</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="row justify-content-center">
				<div class="tab-content col-10 " id="pills-tabContent">
					<!-- 登陆 -->
					<div class="tab-pane fade show active" id="sign_in" role="tabpanel" aria-labelledby="sign_in-tab">
						<form action="javascript:void(0)" method="post">
							<input type="text" name="username" id="username" placeholder="你的账号ID/邮箱/手机号" class="form-control" required
							 autofocus />
							<input type="password" name="password" id="password" placeholder="你的密码" class="form-control" required autofocus />
							<hr>
							<button type="submit" class="btn btn-block btn-primary">登录</button>
						</form>
					</div>
					<!-- 注册 -->
					<div class="tab-pane fade" id="sign_up" role="tabpanel" aria-labelledby="sign_up-tab">
						<form action="javascript:void(0)" method="post">
							<input type="text" name="username" id="username" placeholder="你的昵称" class="form-control" required autofocus />
							<input type="text" name="tel" id="tel" placeholder="你的手机号" class="form-control" required />
							<input type="email" name="email" id="email" placeholder="你的邮箱" class="form-control" required />
							<input type="password" name="password" id="password" placeholder="你的密码" class="form-control" required />
							<hr>
							<div class="row justify-content-center">
								<div class="col-6">
									<button type="reset" class="btn btn-block btn-secondary">重置</button>
								</div>
								<div class="col-6">
									<button type="submit" class="btn btn-block btn-primary">注册</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<br>
		</div>
	</div>
</div>
{% endblock %}
